<template>
  <div style="height:100%">
    <el-container style="height:100%">
      <el-header>
        <div style="display:flex;align-items:center;height:100%">
          <img src="../assets/images/logo-system.png" alt="" style="height:56px;">
          <div style="height:100%">
            <el-menu style="height:100%" :default-active="headerNavbarActiveIndex" class="el-menu-demo" mode="horizontal" background-color="transparent"
              text-color="#fff" active-text-color="#ffd04b" @select="changeHeaderNavbarIndex">
              <el-menu-item v-for="item in navbarList" :key="item.index" class="header-navbar-item" style="height:100%" :index="item.index.toString()">{{item.name}}</el-menu-item>
            </el-menu>
          </div>
          <div class="info-block">
            <span class="info-block-content">
              <i class="fa fa-user fa-fw"></i> {{name}}
            </span>
            <span class="info-block-content" @click="jumpToIndex">
              <i class="fa fa-home  fa-fw"></i> 返回首页
            </span>
            <span class="info-block-content" @click="doLogout">
              <i class="fa fa-power-off fa-fw"></i> 退出登录
            </span>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" id="aside">
          <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#164089" text-color="#fff" active-text-color="#ffd04b">
            <div v-for="item in navbarList[headerNavbarActiveIndex-1]['sub']" :key="item.name">
              <el-submenu :index="item['name']" v-if="item['hasSub']" style="border-bottom:solid 1px #19479a;">
                <template slot="title">
                  <span>{{item['name']}}</span>
                </template>
                <div style="border-top:solid 1px #19479a;">
                  <router-link :to="subItem['path']==undefined?'/main/abstract':subItem['path']" v-for="subItem in item['sub']" :key="subItem['name']">
                    <el-menu-item style="border-bottom:solid 1px #19479a;" :index="subItem['name']">{{subItem['name']}}</el-menu-item>
                  </router-link>
                </div>
              </el-submenu>
              <router-link :to="item['path']==undefined?'/main/abstract':item['path']" v-if="!item['hasSub']">
                <el-menu-item :index="item['name']" class="custom-el-menu-item" style="border-bottom:solid 1px #19479a;">
                  <span slot="title">{{item['name']}}</span>
                </el-menu-item>
              </router-link>
            </div>
          </el-menu>
        </el-aside>
        <el-container id="container" style="overflow: hidden;">
          <jt-tag-view></jt-tag-view>
          <el-main>
            <Breadcrumb class="breadcrumb-container"></Breadcrumb>
            <transition name="fade" mode="out-in">
              <keep-alive :include="cachedViews">
                <router-view></router-view>
              </keep-alive>
            </transition>
          </el-main>
          <el-footer style="height: 40px;">上海骏诺信息科技有限公司技术支持</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import {getNavbarListService} from 'service/navbar';
  import Breadcrumb from 'components/jt-breadcrumb';
  import {logoutService} from 'service/auth';
  import JtTagView from '../components/jt-tag-view/index';
  export default {
    name: 'main-frame',
    data() {
      return {
        headerNavbarActiveIndex: '1',
        navbarList: [],
        name: localStorage.getItem('name'),
        screenWidth: document.body.clientWidth,  // 初始化屏幕宽度
        emptyWidth: 260   // 侧边栏+右侧内容的左右空白部分
      };
    },
    mounted() {
      this.setAsideWidth();// 初始化小屏时，侧边栏的宽度
      this.screenChange();
      // 初始化当前导航菜单栏
      let menuActive = localStorage.getItem("menuActive");
      if(menuActive != null) {
        this.headerNavbarActiveIndex = menuActive;
      }
    },
    watch: {
      // 监听浏览器宽度大小
      screenWidth(val){
        this.screenWidth = val;
        this.setContentWidth(val);
      }
    },
    methods: {
      // 实时监听浏览器变化
      screenChange() {
        const that = this;
        this.setContentWidth(this.screenWidth);
        window.onresize = () => {
            return (() => {
                window.screenWidth = document.body.clientWidth;
                that.screenWidth = window.screenWidth;
                this.setAsideWidth();
            })();
        }
      },
      // 设置系统侧边栏宽度 和 页脚宽度
      setAsideWidth() {
        let $aside = document.getElementById("aside");  // 获取侧边栏dom
        let $elfoot = document.getElementsByClassName("el-footer")[0];  // 获取底部页面dom
        if(this.screenWidth <= 1366) {
          $aside.style.width = '160px';
          this.emptyWidth = 220;
          $elfoot.style.width = "calc(100% - 160px)";
        }else{
          $aside.style.width = '200px';
          this.emptyWidth = 260;
          $elfoot.style.width = "calc(100% - 200px)";
        }
      },
      // 兼容IE10 整体页面出现横向滚动条问题
      setContentWidth(width) {
        let $mainDiv = document.getElementById("container");
        $mainDiv.style.width = "calc("+width+"px - "+this.emptyWidth+"px)";
      },
      changeHeaderNavbarIndex(index) {
        this.headerNavbarActiveIndex = index;
        localStorage.setItem("menuActive", index);  // 将导航菜单栏的第几个模块存入浏览器中，避免刷新浏览器菜单栏恢复默认状态
      },
      jumpToIndex() {
        this.$router.push({
          path: '/main/abstract'
        });
      },
      doLogout() {
        localStorage.clear();
        this.$router.push({
              path: '/'
            });
        // logoutService(localStorage.getItem('username'))
        //   .then(() => {
        //     localStorage.clear();
        //     this.$router.push({
        //       path: '/'
        //     });
        //   })
      }
    },
    created() {
      this.navbarList = getNavbarListService();
    },
    components: {
      'Breadcrumb': Breadcrumb,
      'jt-tag-view': JtTagView,
    },
    computed: {
      cachedViews() {
        return this.$store.state.tagsView.cachedViews
      }
    }
  }

</script>

<style scoped>
  .info-block {
    line-height: 90px;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 14px;
  }

  .info-block span {
    cursor: pointer;
  }

  .info-block-content {
    margin-right: 14px;
    margin-left: 11px;
  }

  .header-navbar-item {
    line-height: 90px;
  }

  .header-navbar-item:hover {
    background-color: #112c47 !important;
  }

  .el-footer {
    color: #696969;
    font-size: 13px;
    line-height: 40px;
  }

  .el-header {
    height: 90px !important;
    background-image: url("../assets/images/top-strip.png");
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    min-width: 1024px;
    line-height: 64px;
  }

  .el-footer {
    text-align: center;
    border-top: 1px solid #bfbfbf;
  }

  .el-aside {
    background-image: url("../assets/images/login-bg.png");
    background-position-y: -100px;
    text-align: center;
    width: 200px;
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

</style>
